<?php 
use App\Models\Route;
use App\Models\Navigation;

$routes = Route::getAll();
$navs = Navigation::getAll();

$routeIds = [];
foreach ($acls as $acl) {
    $routeIds[] = $acl['route_id'];
}

?>

@extends('layout.app')

@section('content')

<div class="col-md-6">
    <!-- BOX -->
    <div class="box border orange">
        <div class="box-title">
            <h4><i class="fa fa-sitemap"></i>用户<?php echo " " . $user->name;?> 的权限</h4>
            <div class="tools">
                <a href="javascript:;" class="submit">
                    <i class="fa fa-save"></i>
                </a>
                <a href="javascript:;" class="reload">
                    <i class="fa fa-refresh"></i>
                </a>
                <a href="javascript:;" class="collapse">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a href="javascript:;" class="remove">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="box-body">
            <form id="form" method="post">
            {!! csrf_field() !!}
            <input type="hidden" name="user_id" value="<?php echo $user->user_id?>" />
                <div id="tree3" class="tree"></div>
            </form>
        </div>
    </div>
    <!-- /BOX -->								
</div>

<link rel="stylesheet" type="text/css" href="/js/fuelux-tree/fuelux.min.css" />
<script type="text/javascript" src="/js/fuelux-tree/fuelux.tree.min.js"></script>
<script>
jQuery(document).ready(function() {		

var DataSourceTree = function(options) {
    this._data 	= options.data;
    this._delay = options.delay;
}

DataSourceTree.prototype.data = function(options, callback) {
    var self = this;
    var $data = null;

    if(!("name" in options) && !("type" in options)){
        $data = this._data;//the root tree
        callback({ data: $data });
        return;
    }
    else if("type" in options && options.type == "folder") {
        if("additionalParameters" in options && "children" in options.additionalParameters)
            $data = options.additionalParameters.children;
        else $data = {}//no data
    }
    
    if($data != null)//this setTimeout is only for mimicking some random delay
        setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

    //we have used static data here
    //but you can retrieve your data dynamically from a server using ajax call
    //checkout examples/treeview.html and examples/treeview.js for more info
    };

    var tree_data = {
        <?php foreach ($navs as $nav) :?>
        '<?php echo $nav['nav_id'];?>' : {
            name: '<?php echo $nav['label']?>',
            type: 'folder'}, 
        <?php endforeach;?>
    };

    var x;
    for (x in tree_data) {
        var children  = {};
        <?php foreach ($routes as $nav) :?>
        if (x == '<?php echo $nav['nav_id'];?>') {
            children[<?php echo $nav['route_id'];?>] = {
                name: '<input name="ids[]" type="checkbox" value="<?php echo $nav['route_id'];?>" <?php if(in_array($nav['route_id'], $routeIds)):?>checked="checked"<?php endif;?> /> &nbsp;<span class="label label-<?php if (!$nav->is_nav) :?>default<?php else :?>success<?php endif;?>"><?php echo $nav['label'] ?></span>',
                type: 'item'};
        } 
        <?php endforeach;?>
        tree_data[x]['additionalParameters'] = {children: children};
    }

    var treeDataSource = new DataSourceTree({data: tree_data});

    var handleTree = function () {
        $('#tree3').admin_tree({
            dataSource: treeDataSource ,
            multiSelect:true,
            loadingHTML:'<div class="tree-loading"><i class="fa fa-spinner fa-2x fa-spin"></i></div>',
            'open-icon' : 'fa-minus-square',
            'close-icon' : 'fa-plus-square',
            'selectable' : true,
            'selected-icon' : null,
            'unselected-icon' : null
        });

        //To add font awesome support
        $('.tree').find('[class*="fa-"]').addClass("fa");
    }
    handleTree();
    $('.tree-folder-header').click();
});
</script>

@endsection